@import "../_style/base.less";

.wdmb-toast {
    .wdmb-toast-info {
        padding: 8*@hd 15*@hd;
        line-height: 16*@hd;
        box-sizing: border-box;
        font-size: 13*@hd;
        color: #fff;
        max-width: 238.5*@hd;
        background-color: #626262;
        border-radius: 5*@hd;
    }

    .wdmb-toast-spe {
        font-size: 13*@hd;
        line-height: 16*@hd;
        text-align: center;
        box-sizing: border-box;
        color: #fff;
        background-color: #626262;
        border-radius: 5*@hd;
        padding: 15*@hd 19*@hd 14*@hd;
        max-width: 90*@hd;

        i {
            display: block;
            width: 36*@hd;
            height: 36*@hd;
            margin: 0 auto 9*@hd;
            background-repeat: no-repeat;
            background-size: contain;
        }

        &.wdmb-toast-success {
            i {
                background-image: url('./images/success.png');
            }
        }

        &.wdmb-toast-fail {
            i {
                background-image: url('./images/fail.png');
            }
        }

        &.wdmb-toast-loading-1 {
            i {
                background-image: url('./images/loading-1.png');
                animation: load 1s linear infinite;
            }
        }

        &.wdmb-toast-loading-2 {
            width: 60*@hd;
            height: 60*@hd;
            padding: 15*@hd;

            i {
                display: block;
                width: 29.5*@hd;
                height: 29.5*@hd;
                margin: 0;
                background-image: url('./images/loading-2.png');
                animation: load 1s linear infinite;
            }
        }
    }
}

@keyframes load {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}